<template>
	<view class="indexContainer">
		<Nav @changeFlag="changeFlag"></Nav>
		<scroll-view v-show="flag === 1" class="main" scroll-y="true" enable-flex>
			<swiper class="swiperList" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(swiper,index) in swiperList" :key="index">
					<view class="swiperItem">
						<image class="swiperImg" :src="swiper.mImage" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
			<image class="img" src="https://image3.vipmro.net/mallAdver/1ede3326-b8c4-4953-83d4-33167281e133.png" mode=""></image>
			<view class="bannerList">
				<view class="bannerItem" v-for="(banner,index) in navList" :key="banner.id">
					<image class="bannerImg" :src="banner.icon" mode=""></image>
					<text class="bannerText">{{banner.title}}</text>
				</view>
			</view>
			<view class="advList">
				<view class="advItem">
					<image class="advTopImg" :src="bannerListData.mainImg" mode=""></image>
					<view class="advMain">
						<image class="mainImg" :src="bannerGoods.image" mode=""></image>
						<view class="advText">
							<text class="title">{{bannerGoods.goodsName}}</text>
							<text class="content">{{bannerGoods.labelName}}</text>
						</view>
					</view>
					<view class="mainBot">
						<image class="mainBotImg" :src="bannerListData.priceImg" mode=""></image>
						<view class="price">
							<text class="mainBotText">{{bannerGoods.morningPrice}}</text>
							<text class="mainPrice">{{bannerGoods.price}}</text>
						</view>
					</view>
				</view>
				<view class="advItem">
					<view class="advTopR">
						<image class="topImgR" :src="goodsDetail[0].icon" mode=""></image>
						<image class="topImgR" :src="goodsDetail[1].icon" mode=""></image>
					</view>
					<image class="botImgR" :src="goodsDetail[2].icon" mode=""></image>
				</view>
			</view>
			<view class="hot">
				<view class="hotTitle">
					<image class="hotImg" src="../../static/images/hot.png" mode=""></image>
					<text class="hotText">{{config.title}}</text>
					<text class="miniTitle">{{config.subtitle}}</text>
				</view>
				<scroll-view enable-flex scroll-x="true" class="hotList">
					<view class="hotItem" v-for="(adv,index) in advGoods" :key="adv.goodsId">
						<image class="goodImg" :src="adv.goodsImg" mode=""></image>
						<text class="hotContent">{{adv.goodsName}}</text>
						<view class="goodDetail">
							<text class="hotLogo">企</text>
							<text class="hotPrice">￥{{adv.priceMap.salePrice}}</text>
						</view>
					</view>
				</scroll-view>
				<view class="goodsDetail">
					<view class="goodsTitle">
						<image class="goodsLogo" src="../../static/images/goodsLogo.png" mode=""></image>
						<text class="goodsTitle">产原地精选</text>
					</view>
					<view class="goodsNavList">
						<view class="goodsNavItem">
							<scroll-view class="goodsSelect" enable-flex scroll-x="true">
								<view class="selectItem"  @click="changeAddressId(address.id)" v-for="(address,index) in addressList" :key="address.id">
									<text class="selectTop" :class="{active:currentId === address.id }">{{address.mainLabel}}</text>
									<text class="selectBot" :style="{color:currentId === address.id?'red':'gray'}">{{address.subLabel}}</text>
								</view>
							</scroll-view >
							<image class="goodsPic" :src="imgUrl" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<view class="mainScroll">
				<view class="mainLeft">
					<view class="leftItem" v-for="(showItem,index) in showItemLeft" :key="index">
						<image class="mainLeftImg" :src="showItem.image" mode=""></image>
						<view class="mainLeftText">
							<text class="mainTitle">{{showItem.title}}</text>
							<view class="mainBot">
								<text class="mainLogo">企</text>
								<text class="mainPrice">￥{{showItem.salePrice}}</text>
								<text class="priceOrigin">{{showItem.price}}</text>
							</view>
						</view>
					</view>
				</view>	
				<view class="mainRight">
					<view class="leftItem" v-for="(right,index) in showItemRight" :key="index">
						<image class="mainLeftImg" :src="right.image" mode=""></image>
						<view class="mainLeftText">
							<text class="mainTitle">{{right.title}}</text>
							<view class="mainBot">
								<text class="mainLogo">企</text>
								<text class="mainPrice">￥{{right.salePrice}}</text>
								<text class="priceOrigin">{{right.price}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<NavDetail v-show="flag === 2"></NavDetail>
	</view>
</template>

<script>
	import NavDetail from '@/pages/index/components/navDetail/navDetail.vue'
	import {mapState,mapGetters} from 'vuex'
	export default {
		data() {
			return {
				currentId:8,
				imgUrl:'',
				flag:1
			}
			},
			components:{
				NavDetail
			},
			mounted(){
				this.getSwiperList(),
				this.getNavList(),
				this.getBannerList(),
				this.getAdvListData(),
				this.getAddressList(),
				this.getShowItemList()
			},
			methods:{
				getSwiperList(){
					this.$store.dispatch('home/getSwiperList')
				},
				getNavList(){
					this.$store.dispatch('home/getNavList')
				},
				getBannerList(){
					this.$store.dispatch('home/getBannerList')
				},
				getAdvListData(){
					this.$store.dispatch('home/getAdvListData')
				},
				async getAddressList(){
					const result = await this.$store.dispatch('home/getAddressList')
					this.currentId = result[0].id
					this.imgUrl = result[0].advImg
					// console.log(result)
				},
				changeAddressId(id){
					this.currentId = id
					this.imgUrl = this.addressList.find(item =>item.id === this.currentId).advImg
				},
				getShowItemList(){
					this.$store.dispatch('home/getShowItemList')
				},
				changeFlag(value){
					this.flag = value
				}
			},
			computed:{
				...mapState('home',['swiperList','navList','bannerListData','addressList','advListData']),
				...mapGetters('home',['bannerGoods','goodsDetail','advGoods','config','showItemLeft','showItemRight'])
			}
		}
	
</script>

<style lang="stylus">
		.main
			height: calc(100vh - 190upx)
			display: flex
			flex-direction: column
			.swiperList
				background-color: #272f6d
				.swiperItem
					text-align: center
					.swiperImg
						width: 90%
						border-radius: 40upx
			.img
				height: 60upx	
				width: 100%
				flex-shrink: 0
			.bannerList
				height: 200upx
				width: 100%
				display: flex
				.bannerItem
					margin-top: 20upx
					display: flex
					flex-direction: column
					align-items: center
					width: 20%
					.bannerImg
						width: 100upx
						height: 100upx
					.bannerText
						font-size: 28upx
						margin-top: 10upx
			.advList
				height: 360upx
				display: flex
				margin-bottom: 20upx
				.advItem
					display: flex
					flex-direction: column
					width: 50%
					.advTopR
						display: flex
						.topImgR
							width: 200upx
							height: 200upx
							flex-shrink: 0
							padding: 10upx 10upx
					.botImgR
						height: 120upx
						width: 400upx
					.advTopImg
						height: 50upx
						width: 300upx
						flex-shrink: 0
					.advMain
						display: flex
						align-items: center
						margin-bottom: 20upx
						.mainImg
							width: 200upx
							height: 200upx
							flex-shrink: 0
						.advText
							display: flex
							flex-direction: column
							.title
								font-size: 30upx
								display: -webkit-box
								-webkit-box-orient: vertical
								-webkit-line-clamp: 2
								overflow: hidden
							.content
								font-size: 28upx
								margin-top: 10upx
								background-color: #f99738
								text-align: center
					.mainBot
						display: flex	
						width: 300upx
						height: 50upx
						.mainBotImg
							width: 100upx
							height: 50upx
							flex-shrink: 0
						.price	
							display: flex
							align-items: center
							background-color: #f62748
							.mainBotText
								text-align: left
								width: 220upx
								color: white
							.mainPrice
								font-size: 24upx
								background-color: #f99738
								flex-shrink: 0
								text-decoration: line-through
		.hot
			display: flex
			flex-direction: column
			.hotTitle
				.hotImg
					width: 40upx
					height: 40upx		
					margin: 0 10upx	
				.hotText
					font-weight: bold
				.miniTitle
					font-size: 28upx
					margin-left: 10upx
					font-weight: lighter
			.hotList
				height: 360upx
				display: flex
				.hotItem
					margin: 10upx
					width: 210upx
					display: flex
					flex-direction: column
					.goodImg
						width: 200upx
						height: 200upx
					.hotContent		
						font-size: 28upx
						display: -webkit-box
						-webkit-box-orient: vertical
						-webkit-line-clamp: 2
						overflow: hidden
					.goodDetail
						display: flex
						flex-wrap: nowrap
						.hotLogo
							background-color: red
							font-size: 28upx
							color: white
							margin: 10upx 10upx
							flex-shrink: 0
						.hotPrice
							color: red
							font-size: 28upx
							margin: 10upx 0 
			.goodsDetail
				display: flex
				flex-direction: column
				.goodsTitle
					height: 40upx
					display: flex
					margin-bottom: 20upx
					.goodsLogo
						width: 40upx
						height: 40upx
						margin: 0 20upx
					.goodsTitle
						font-weight: bold
						align-items: center
				.goodsNavList
					.goodsNavItem
						height: 320upx
						.goodsSelect
							height: 80upx
							display: flex
							.selectItem
								display: flex
								flex-direction: column
								padding: 0 10upx
								flex-shrink: 0
								justify-content: center
								.selectTop
									background-color: #aaa
									font-size: 28upx
									color: white
									height: 30upx
									line-height: 30upx
									text-align: center
									padding: 0 10upx
									border-radius: 40upx
									&.active
										color: red
										background-color: green
								.selectBot
									font-size: 24upx
									font-weight: lighter
									margin-top: 10upx
									flex-wrap: nowrap
									text-align: center
						.goodsPic
							width: 100%
							height: 200upx		
		.mainScroll
			display: flex					
			justify-content: space-around
			background-color: #f2f2f2
			.mainLeft
				width: 50%
				margin-left: 15upx
				.mainLeftImg
					width: 300upx
					height: 300upx	
				.mainLeftText
					.mainTitle
						display: -webkit-box
						-webkit-box-orient: vertical
						-webkit-line-clamp: 2
						overflow: hidden
						font-size: 26upx
						font-weight: lighters
						width: 300upx
					.mainBot
						.mainLogo
							font-size: 28upx
							background-color: red
							padding: 0 10upx
							color: white
						.mainPrice
							font-size: 40upx
							color: red
						.mainPricePoint
							font-size: 28upx
							color: red
							font-weight: lighter
							margin-right: 20upx
						.priceOrigin
							font-size: 24upx
							color: #aaa
							font-weight: lighter
							text-decoration: line-through
			.mainRight
				width: 50%
				margin-right: 15upx
				.mainLeftImg
					width: 300upx
					height: 300upx	
				.mainLeftText
					.mainTitle
						display: -webkit-box
						-webkit-box-orient: vertical
						-webkit-line-clamp: 2
						overflow: hidden
						font-size: 26upx
						font-weight: lighters
					.mainBot
						.mainLogo
							font-size: 28upx
							background-color: red
							padding: 0 10upx
							color: white
						.mainPrice
							font-size: 40upx
							color: red
						.mainPricePoint
							font-size: 28upx
							color: red
							font-weight: lighter
							margin-right: 20upx
						.priceOrigin
							font-size: 24upx
							color: #aaa
							font-weight: lighter
							text-decoration: line-through			
</style>
